<!doctype html>
<!--
//
// Qutum 10 implementation
// Copyright 2008-2013 Qianyan Cai
// Under the terms of the GNU General Public License version 3
// http://qutum.com
//
-->
<html>
<head>
<meta charset=UTF-8>
<title>Qutum 10</title>
</head>
<body class='split1'>

<div id='left'>
<div class='tool'></div>
<div id='zonest'></div>
<div id='banner'>Qutum 10 Editor
	<a href='http://qutum.com' target=_blank><img src='http://qutum.com/qutum.png'></a>
</div>
</div>

<div id='right'>
<div id='split'><div></div></div>
<div class='editor'><div class='tool'></div><div class='toolv'></div></div>
</div>

<style>
html, body { width:100%; height:100%; padding:0; margin:0; overflow:hidden }
body { font:16px Times,serif }
div { position:relative }
img { border:0 }

#left, #right
{
	position:absolute; height:100%;
	box-sizing:border-box;-moz-box-sizing:border-box;
	transition:all 0.5s ease;-webkit-transition:all 0.5s ease;
}
	body.split0 #left { width:0%; overflow:hidden }
	body.split0 #right { left:0%; width:100% }
	body.split1 #left { width:16% }
	body.split1 #right { left:16%; width:84% }
	body.split2 #left { width:32% }
	body.split2 #right { left:32%; width:68% }

#left
{
	height:100%; padding:28px 0 30px;
}
#left .tool { top:0; position:absolute }
#zonest { min-width:150px; height:100%; overflow-x:hidden; overflow-y:auto }
	#zonest >div { line-height:24px; padding:0 1ex; white-space:nowrap }
	#zonest >div:nth-child(odd) { background:#f9f9f6 }
	#zonest >div:nth-child(even) { background:#f7f5e9 }
	#zonest >div.active
	{
		background:linear-gradient(top,#f2f5ff,#d1daff 50%,#c3cfff 50%,#e0e6ff);
		background:-moz-linear-gradient(top,#f2f5ff,#d1daff 50%,#c3cfff 50%,#e0e6ff);
		background:-webkit-gradient(linear,left top,left bottom,
			color-stop(0,#f2f5ff),color-stop(0.5,#d1daff),
			color-stop(0.5,#c3cfff),color-stop(1,#e0e6ff));
	}
	#zonest >div >span:first-child
	{
		display:none; font-weight:bold; color:#00f; padding:0;
		user-select:none;-webkit-user-select:none; /* no firefox */
	}
	#zonest >div >span { padding-left:3px; overflow:hidden; text-overflow:ellipsis }
	#zonest >div >.unnamed { font-style:italic; opacity:0.6 }
	#zonest >div >.tool { top:0; right:0; width:auto; position:absolute; display:none }
	#zonest >div:hover >.tool { display:inline; height:24px; background:rgba(240,240,255,.7) }
	#zonest >div >.tool >a { line-height:24px; width:24px }
	#zonest >div >.tool >a >div { right:0 }
	#zonest >div >.tool >input >div { right:100 }

#banner
{
	min-width:150px; line-height:24px; padding:3px;
	background:#dae0ff; text-shadow:2px 1px 3px #336;
}
	#banner img { float:right; width:24px; height:24px; vertical-align:middle }

#split { width:3px; height:100%; position:absolute; background:rgb(191,204,255) }
	#split div
	{
		width:9px; height:22px; left:2px; top:3px; border-radius:0 4px 4px 0;
		background:#c7d2ff; /* opera */
		background:linear-gradient(right,#e8edff,#bdcaff 50%,#a3b7ff 50%,#c7d2ff);
		background:-moz-linear-gradient(right,#e8edff,#bdcaff 50%,#a3b7ff 50%,#c7d2ff);
		background:-webkit-gradient(linear,right top,left top,
			color-stop(0,#e8edff),color-stop(0.5,#bdcaff),
			color-stop(0.5,#a3b7ff),color-stop(1,#c7d2ff));
		opacity:0.7; z-index:10;
	}
	#split div:hover { opacity:1 }
	body:not(.split0) #split { background:rgba(191,204,255,0.6) }
	body:not(.split0) #split div
	{
		transform:scale(-1); transform-origin:0;
		-webkit-transform:scale(-1); -webkit-transform-origin:0;
		-o-transform:scale(-1); -o-transform-origin:0;
	}

.editor
{
	width:100%; height:100%; position:absolute; overflow:hidden;
	box-sizing:border-box;-moz-box-sizing:border-box;
	padding:30px 2px 2px 33px;
}
.editor .tool, .editor .toolv { left:3px; top:0; position:absolute }
	.editor .tool { z-index:2 }
	.editor .tool >a:first-child { margin-left:30px }
	.editor .toolv >a:first-child { margin-top:30px }

.edit
{
	height:100%; overflow:scroll; font:15px Times,serif;
	user-select:none;-webkit-user-select:none; /* no firefox */
}
	.edit:focus { outline:0; box-shadow:0 0 4px #03f }
	.edit .whole { position:absolute }
.edit input
{
	user-select:text;-webkit-user-select:text; /* no firefox */
	position:relative; left:-2px; top:-4px; margin:0; padding:2px;
	border-radius:2px; border:0; outline:0;
}
	.edit input.input { box-shadow:0 0 6px #608 }
	.edit input.datum { box-shadow:0 0 6px #080 }
	.edit input.output { box-shadow:0 0 6px #059 }
	@-moz-document url-prefix() { .edit input { left:-3px; top:-2px } }
.edit .err
{
	white-space:pre; padding:3px; color:#700; background:rgba(255,240,240,0.7);
	border:1px solid red; border-radius:5px;
	box-shadow:0 0 6px red;
}
	.edit .err .ref { border:1px solid #f33; padding:0 2px }

.tool
{
	width:100%; height:28px; white-space:nowrap;
	background:#f3f3f3; /* opera */
	background:linear-gradient(top,#f7f7f7,#e9e9e9 50%,#dfdfdf 50%,#eee);
	background:-moz-linear-gradient(top,#f7f7f7,#e9e9e9 50%,#dfdfdf 50%,#eee);
	background:-webkit-gradient(linear,left top,left bottom,
		color-stop(0,#f7f7f7),color-stop(0.5,#e9e9e9),
		color-stop(0.5,#dfdfdf),color-stop(1,#eee));
	user-select:none;-webkit-user-select:none; /* no firefox */
}
.toolv
{
	width:28px; height:100%;
	background:#f3f3f3; /* opera */
	background:linear-gradient(left,#f7f7f7 0,#e9e9e9 50%,#dfdfdf 50%,#eee 100%);
	background:-moz-linear-gradient(left,#f7f7f7 0,#e9e9e9 50%,#dfdfdf 50%,#eee 100%);
	background:-webkit-gradient(linear,left top,right top,
		color-stop(0,#f7f7f7),color-stop(0.5,#e9e9e9),
		color-stop(0.5,#dfdfdf),color-stop(1,#eee));
	user-select:none;-moz-user-select:none;-webkit-user-select:none;
}
	.tool >span { margin-left:1ex }
	.toolv >span { display:block; height:1ex }
	.tool >a[disabled], .toolv >a[disabled] { color:gray }
	.tool >a, .toolv >a
	{
		display:inline-block; position:relative; cursor:default; outline:0;
		width:28px; line-height:28px; text-align:center;
	}
	.tool >a:hover, .tool >a.hover
	{
		background:#d1daff; /* opera */
		background:linear-gradient(top,#f2f5ff,#d1daff 50%,#bdcaff 50%,#e0e6ff);
		background:-moz-linear-gradient(top,#f2f5ff,#d1daff 50%,#bdcaff 50%,#e0e6ff);
		background:-webkit-gradient(linear,left top,left bottom,
			color-stop(0,#f2f5ff),color-stop(0.5,#d1daff),
			color-stop(0.5,#bdcaff),color-stop(1,#e0e6ff));
	}
	.tool >a:active
	{
		background:linear-gradient(top,#e8edff,#bdcaff 50%,#a3b7ff 50%,#c7d2ff);
		background:-moz-linear-gradient(top,#e8edff,#bdcaff 50%,#a3b7ff 50%,#c7d2ff);
		background:-webkit-gradient(linear,left top,left bottom,
			color-stop(0,#e8edff),color-stop(0.5,#bdcaff),
			color-stop(0.5,#a3b7ff),color-stop(1,#c7d2ff));
	}
	.toolv >a:hover
	{
		background:#d1daff; /* opera */
		background:linear-gradient(left,#f2f5ff,#d1daff 50%,#bdcaff 50%,#e0e6ff);
		background:-moz-linear-gradient(left,#f2f5ff,#d1daff 50%,#bdcaff 50%,#e0e6ff);
		background:-webkit-gradient(linear,left top,right top,
			color-stop(0,#f2f5ff),color-stop(0.5,#d1daff),
			color-stop(0.5,#bdcaff),color-stop(1,#e0e6ff));
	}
	.toolv >a:active
	{
		background:linear-gradient(left,#e8edff,#bdcaff 50%,#a3b7ff 50%,#c7d2ff);
		background:-moz-linear-gradient(left,#e8edff,#bdcaff 50%,#a3b7ff 50%,#c7d2ff);
		background:-webkit-gradient(linear,left top,right top,
			color-stop(0,#e8edff),color-stop(0.5,#bdcaff),
			color-stop(0.5,#a3b7ff),color-stop(1,#c7d2ff));
	}
	.tool >a >div, .toolv >a >div
	{
		position:absolute; padding:0.5ex 1ex;
		white-space:nowrap; text-align:left; line-height:1.2em;
		background:#faf3ee; text-shadow:1px 1px 3px #875;
		box-shadow:0 0 6px #986;
		visibility:hidden; opacity:0; z-index:10;
	}
	.toolv >a >div { left:100%; top:0 }
	.tool >a:hover >div:not(:hover), .toolv >a:hover >div:not(:hover)
	{
		visibility:visible; opacity:0.9;
		transition:opacity 1s cubic-bezier(0.6,0,0,0.8);
		-webkit-transition:opacity 1s cubic-bezier(0.6,0,0,0.8);
	}
	.tool >a >div >span, .toolv >a >div >span
	{
		color:#c00;
	}

#Log
{
	position:fixed; right:0; bottom:0; max-width:40em; max-height:20em; overflow:scroll;
	padding:1ex; border:1px solid #99f; background:rgba(192,192,255,0.6);
	opacity:0.93;
}
	#Log .line { white-space:nowrap; min-height:1ex }
	#Log .err { color:red }
</style>

<script src=util.js></script>
<script src=edit.js></script>
<script src=datum.js></script>
<script src=row.js></script>
<script src=wire.js></script>
<script src=command.js></script>
<script src=layer.js></script>
<script src=compile.js></script>
<script src=toolbar.js></script>
<script src=saver.js></script>
<script src=index.js></script>
</body>
</html>
